window.addEventListener('load', function() {
    /* 
    轮播图也称为焦点图，是网页中比较常见的网页特效。
    功能需求：
    1. 鼠标经过轮播图模块
    2. 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
    3. 图片播放的同时，下面小圆圈跟随一起变化
    4. 点击小圆圈，可以播放相应图片
    5. 鼠标不经过轮播图，轮播图也会自动播放图片
    6. 鼠标经过，轮播图模块，自动播放停止
    */
    (function(){
         /* 
        1. 因为js较多，我们单独新建js文件夹，再新建js文件，引入页面中
        2. 此时需要添加load事件
        3. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
        4. 显示隐藏display按钮
        */
        var arrow_l = document.querySelector('.arrow-prev');
        var arrow_r = document.querySelector('.arrow-next');
        var focus = document.querySelector('.focus');
        // 2. 鼠标经过focus 就显示隐藏左右按钮
        focus.addEventListener('mouseenter', function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            clearInterval(timer);
            timer = null;
        });
        focus.addEventListener('mouseleave', function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            // 因为timer已经声明过了，此处不需要加var
            timer = setInterval(function() {
                // 做了一个手动的点击事件
             arrow_r.click();
            }, 2000);
        });
        /* 
        1. 动态生成小圆圈
        2. 核心思路：小圆圈的个数要跟图片张数一致
        3. 所以首先先得到ul里面图片的张数（图片放入li里面，所以就是li的个数）
        4. 利用循环动态生成小圆圈（这个小圆圈要放入ol里面）
        5. 动态创建节点creatElement('li');
        6. 插入节点ol.apendChild(li)
        */
       var main = document.querySelector('.main-img');
        var mainImg = document.querySelector('.main-img').querySelectorAll('li');
        var ol = document.querySelector('.circle');
        var focusWidth = focus.offsetWidth;

       


        for(var i = 0; i < mainImg.length; i++) {
            var li = document.createElement('li');
            li.setAttribute('data-index',i);
            ol.appendChild(li);
            // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
            li.addEventListener('click', function() {
                // 干掉所有人
                for(var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                // 留下我自己
                this.className = 'crrent';
                  /* 
                1. 点击小圆圈滚动图片
                2. 此时用到animate动画函数，将js文件引入(注意，因为index.js依赖animate.js所以，animate.js要写到index.js上面)
                3. 使用动画函数的前提，该元素必须有定位
                4. 注意是ul移动而不是li
                5. 滚动图片的核心算法：点击某个小圆圈，就让图片滚动 小圆圈的索引号乘以图片的宽度做为ul移动距离
                6. 此时需要知道小圆圈的索引号，我们可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定义属性即可。
                */
                
                // 5. 点击小圆圈，移动图片 当然移动的是ul
                // ul 的移动距离 小圆圈的索引号 乘以图片的宽度
                num = this.dataset.index;
                // 当我们点击了某个xiaoli 就要把 li 的索引号给circle
                circle = num;
                // num = circle = this.dataset.index;
                this.target = - focusWidth * this.dataset.index;
                animate(main, this.target);
            })
        }
        // 把ol第一个li设置类名为crrent
        var circle = 0;

        var num = 0;
        ol.children[0].className = 'crrent';
        /* 
        1. 点击右侧按钮一次，就让图片滚动一张
        2. 声明一个变量num，点击一次，自增1，让这个变量乘以图片宽度，就是ul的滚动距离
        */
       // 6. 克隆第一张图片，放到ul 最后面
       var first = main.children[0].cloneNode(true);
       main.appendChild(first);
       // 7. 点击右侧按钮，图片滚动一张
       // circle 控制小圆圈的播放
       // flag 节流阀
       var flag = true;
       arrow_r.addEventListener('click', function() {
           if(flag) {
               flag = false; // 关闭节流阀
               // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为0
           if(num == main.children.length - 1) {
            main.style.left = 0;
            num = 0;
        }
            num++;
            animate(main, -num*focusWidth, function() {
                flag = true;
            });
            // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
            circle++;
            // 如果circle等于4，说明走到了最后一张图
            if( circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
            }
        });
        //  9. 左侧按钮做法
        arrow_l.addEventListener('click', function() {
            // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为0
            if(flag) {
                flag = false;
                if(num == 0) {
                    num = main.children.length - 1;
                    main.style.left = -num * focusWidth + 'px'; 
            }
                num--;
                animate(main, -num*focusWidth, function() {
                    flag = true;
                });
                // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
                circle--;
                // 如果circle小于0，说明走到了第一张图
            /*  if( circle < 0) {
                    circle = ol.children.length - 1;
                } */
                circle = circle < 0 ? circle = ol.children.length - 1 : circle;
                circleChange();
            }
           
       });
      
       function circleChange() {
            // 先清除其余小圆圈的crrent类名
            for(var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
            }
            // 给当前小圆圈类名crrent
            // 留下我自己
            ol.children[circle].className = 'crrent';
        }

        /*
        1. 自动播放功能
        2. 添加一个定时器
        3. 自动播放轮播图，实际就类似于点击了右侧按钮
        4. 此时可以调用右侧按钮点击事件arrow_r.click()
        */
       var timer = setInterval(function() {
           // 做了一个手动的点击事件
        arrow_r.click();
       }, 2000);

    })();
    
   
       

    
    


























});